<template>
    <div class="View" ref="View">
        <div class="Layout" :style="Layout">
            <Block v-for="item in blockData" :data="item" />
        </div>
        <svg class="Layout" :style="Layout">
            <Line v-for="item in LinkData" :data="item" :count="XCounts" />
        </svg>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import Block from './Block.vue';
import Line from './Line.vue'

const View = ref();
// 随机函数

const Layout = ref({});
const random = (min, max) => min + Math.floor(Math.random() * (max - min + 1));

const blockData = ref([]);
const LinkData = ref([]);
const XCounts = ref(0);

// 生成测试数据
onMounted(() => {
    var XLength = parseInt(View.value.clientWidth / 100);
    var Ylength = parseInt(View.value.clientHeight / 100);
    // console.log(XLength);
    XCounts.value = XLength;

    var AllCounts = XLength * Ylength;

    Layout.value.width = XLength * 100 + 'px';
    Layout.value.height = Ylength * 100 + 'px';
    Layout.value.left = (View.value.clientWidth - XLength * 100) / 2 + 'px';
    Layout.value.top = (View.value.clientHeight - Ylength * 100) / 2 + 'px';


    // 生成测试数据
    for (let i = 0; i < AllCounts; i++) {
        var Data = {
            isLink: Math.random() < 0.333,
            i: i,
        };
        blockData.value.push(Data);
        if (Data.isLink) {
            LinkData.value.push(Data);
        }
    };
    var ActiveIndex = random(0, LinkData.value.length - 1)
    for (let i = 0; i < LinkData.value.length; i++) {
        const element = LinkData.value[i];
        element.linkTo = LinkData.value[ActiveIndex].i;
    }

})


</script>
<style lang="less" scoped>
.View {
    width: 100%;
    height: 100%;
    position: relative;
}

.Layout {
    position: absolute;
}

svg.Layout {
    pointer-events: none;
}
</style>